<template>
  <div v-if="options" class="flex gap-x-1">
    <button
      v-for="option in options"
      :class="[$style.button, { [$style.selected]: option.isSelected }]"
      @click="option.select"
      type="button"
    >
      {{ t(option.text) }}
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from "vue";
import { useI18n } from "vue-i18n";
import { StatFilter, ItemHasEmptyModifier } from "./interfaces";

export default defineComponent({
  props: {
    filter: {
      type: Object as PropType<StatFilter>,
      required: true,
    },
  },
  setup(props) {
    function select(value: ItemHasEmptyModifier) {
      const { filter } = props;
      filter.option!.value = value;
      filter.disabled = false;
      const roll = filter.additionalInfo!.emptyModifierInfo![value];
      filter.roll = {
        value: roll,
        min: roll,
        max: undefined,
        default: { min: roll, max: roll },
        dp: false,
        isNegated: false,
      };
    }

    const options = computed(() => {
      const { filter } = props;
      if (filter.tradeId[0] !== "item.has_empty_modifier") return null;

      return (
        [
          [ItemHasEmptyModifier.Any, "item.has_empty_affix"],
          [ItemHasEmptyModifier.Prefix, "item.has_empty_prefix"],
          [ItemHasEmptyModifier.Suffix, "item.has_empty_suffix"],
        ] as const
      )
        .filter(([value]) => filter.additionalInfo!.emptyModifierInfo![value])
        .map(([value, text]) => ({
          text,
          select: () => select(value),
          isSelected: filter.option!.value === value,
        }));
    });

    const { t } = useI18n();
    return { t, options };
  },
});
</script>

<style lang="postcss" module>
.button {
  @apply bg-gray-700;
  @apply rounded;
  @apply px-2;
  @apply border border-transparent;
  line-height: 1.15rem;
}

.selected {
  @apply border-gray-500;
}
</style>
